<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>编辑</title>
    <link rel="stylesheet" href="/static/style.css">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body>
<div class="vote-add">
    <form class="layui-form layui-form-pane" id="editForm" action="">
        <input type="hidden" id="vid">
        <input type="hidden" id="cid">
        <div class="layui-upload" style="margin-left: 130px">
            <button type="button" class=" layui-btn" id="choiceList"><i class="iconfont icon-e645"></i>选择多文件</button>
            <div class="layui-upload-list layui-upList-minHeight">
                <table class="layui-table">
                    <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="demoList">
                    <tr id="upload"></tr>
                    </tbody>
                </table>
            </div>
            <div class="layui-form-item layui-btn-Center">
                <div class="layui-input-block text-right">
                    <button type="button" class="layui-btn layui-btn-xs" id="choiceListAction">开始上传</button>
                    <button class="btn layui-btn layui-btn-xs layui-btn-primary js_close" id="quXiao" type="button">取消</button>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label for="rank" class="layui-form-label">职位</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="rank" required>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">简介</label>
            <div class="layui-input-block">
                <textarea name="details" required lay-verify="required|details" placeholder="请输入简介，不多于200字"
                          class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="candidate-edit-submit" id="candidate-edit-submit" value="确认">
        </div>
    </form>
</div>
<script src="/static/layui/layui.js"></script>
<script>
    layui.extend({
        candidateList: '/static/lib/candidateList'
    });
    layui.use(['form', 'jquery', 'upload'], function () {
        var $ = layui.$
            , form = layui.form
            , upload = layui.upload;

        //多文件列表示例
        $(function () {
            var uploadFile = {
                init: function () {
                    this.upload();
                },
                //上传文件
                upload: function () {
                    layui.use('upload', function () {
                        var $ = layui.jquery,
                            upload = layui.upload;
                        //多文件列表示例
                        var demoListView = $('#demoList'),
                            uploadListIns = upload.render({
                                elem: '#choiceList',
                                url: '/media/upload?' + 'vid=' + $('#vid').val() + '&cid=' + $('#cid').val(),
                                accept: 'file',
                                multiple: true,
                                auto: false,
                                number: 2,
                                bindAction: '#choiceListAction',
                                choose: function (obj) {
                                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                                    //读取本地文件
                                    obj.preview(function (index, file, result) {
                                        var tr = $(['<tr id="upload-' + index + '">',
                                            '<td>' + file.name + '</td>',
                                            '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>',
                                            '<td>等待上传</td>',
                                            '<td>',
                                            '<button class="layui-btn layui-btn-xs demo-reload layui-hide">重传</button>',
                                            '<button class="layui-btn layui-btn-xs layui-btn-danger demo-delete">删除</button>',
                                            '</td>',
                                            '</tr>'
                                        ].join(''));

                                        //单个重传
                                        tr.find('.demo-reload').on('click', function () {
                                            obj.upload(index, file);
                                        });

                                        //删除
                                        tr.find('.demo-delete').on('click', function () {
                                            delete files[index]; //删除对应的文件
                                            tr.remove();
                                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                                        });
                                        demoListView.append(tr);
                                    });
                                },
                                done: function (res, index, upload) {
                                    if (res.status == 200) { //上传成功
                                        var tr = demoListView.find('tr#upload-' + index),
                                            tds = tr.children();
                                        tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
                                        tds.eq(3).html(''); //清空操作
                                        return delete this.files[index]; //删除文件队列已经上传成功的文件

                                    }
                                    this.error(index, upload, res.msg);
                                },
                                error: function (index, upload, msg) {
                                    var tr = demoListView.find('tr#upload-' + index),
                                        tds = tr.children();
                                    tds.eq(2).html('<span style="color: #FF5722;">' + msg + '</span>');
                                    tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
                                }
                            });
                    });
                }

            };
            uploadFile.init();
        });

        //表单验证
        form.verify({
            details: function (v, i) {
                if (v.length > 250) {
                    return '简介要小于250字'
                }
            }
        });
    });
</script>
</body>
</html>